<!-- 疫苗新增 -->
<template>
  <view class="box">
    <uv-navbar 
      class="bold-title" 
      title="新增疫苗记录" 
      @leftClick="leftClick"
      :safeAreaInsetTop="true"
      :placeholder="true"
      :height="'44px'"
    ></uv-navbar>
    
    <view class="content-area">
     <InfoTitleList :infoTitleList="animalInfoList0"></InfoTitleList>
	 <AnimalInfo :animalInfo="content"></AnimalInfo>
	 
	 
	 <InfoTitleList :infoTitleList="animalInfoList"></InfoTitleList>
	 <AnimalInfo :animalInfo="content1"></AnimalInfo>
	 
	 
	 
	 <InfoTitleList :infoTitleList="animalInfoList1"></InfoTitleList>
     <AnimalInfo :animalInfo="content2"></AnimalInfo>
	
	 
    </view>
    
    <view class="header">
      <button class="add-button" @click="goToTrace">确定注射</button>
    </view>
  </view>
</template>

<script setup>
  import { ref } from 'vue';
  import { useRouter } from 'vue-router';
  import cowImg from '/static/map/cow.png'; // 确保路径正确
  import InfoTitleList from '@/components/Animals/InfoTitleList.vue';
  import AnimalInfo from '@/components/Animals/AnimalInfo.vue';
  import AnimalInfotb from '@/components/Animals/AnimalInfotb.vue';
  import AnimalInfotbnr from '@/components/Animals/AnimalInfotbnr.vue';
  const router = useRouter();
//断行信息
const animalInfoList0 = [
  {
    title: '牧民信息（操作员）'
  },

];
const animalInfoList = [

  {
    title: '疫苗信息'
  }
];
const animalInfoList1 = [

  {
    title: '添加牲畜'
  }
];
//各个断行内容
 // 设备信息数据
 const content = [
   {
     title: '牧民',
     type: '韩梅梅',
   },
   {
     title: '电话',
     type: '未填写',   
   },
   {
     title: '接种地址',
     type: '未选择',   
   }
 ];
 
 const content1 = [
   {
     title: '疫苗名称',
     type: '口蹄疫疫苗',
   },
   {
     title: '疫苗批次',
     type: '未填写',   
   },
   {
     title: '接种支数',
     type: '1',   
   }
 ];
 const content2 = [
   {
     title: '选择牲畜',
     type: 'IMEI 12345678911',
	 icon: 'arrow-right'
   },
  
  {
    title: '备注',
      
  },
   
 
 ];

   // 返回按钮点击事件
   const leftClick = () => {
     console.log('返回按钮被点击');
     uni.navigateBack();
   };
 
   // 前往追踪页面
   const goToTrace = () => {
     console.log('前往追踪页面');
     // 这里可以添加导航逻辑，例如 router.push('/trace');
   };
 </script>


<style lang="scss" scoped>
 .box {
   display: flex;
   flex-direction: column;
   height: 100vh;
 }
 
 .bold-title {
   font-weight: bold;
 }
 
 .content-area {
   
   flex: 1; // 确保内容区域占据剩余空间
  
   overflow: auto; // 确保内容可滚动
 }
 

 .header {
   .add-button {
     background-color: #0bcb75;
     color: white;
     border: none;
     border-radius: 8rpx;
     padding: 16rpx;
     width: 100%;
     font-size: 32rpx;
     margin-top: 40rpx;
     position: fixed;
     bottom: 0;
     left: 0;
   }
 }

</style>